<template>
    <div>
        <Row>
            <Card>
                <Form :model="list" label-position="right" :label-width="80" inline>
                    <row>
                        <FormItem label="查询条件">
                            <DatePicker type="date" placeholder="请选择起始日期" style="width: 200px"></DatePicker>&nbsp;到&nbsp;
                            <DatePicker type="date" placeholder="请选择截止日期" style="width: 200px"></DatePicker>
                        </FormItem>
                        <FormItem label="消息类别" style="width: 200px">
                            <Select v-model="type">
                                <Option v-for="item in typeList" :value="item.value" :key="item.value" placeholder="选择消息类别">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="消息状态" style="width: 200px">
                            <Select v-model="situation">
                                <Option v-for="item in situationList" :value="item.value" :key="item.value" placeholder="选择消息状态">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                        <span>
          <Button type="primary" icon="checkmark-circled">确定</Button>
          <Button type="primary" icon="ios-trash">删除</Button>
        </span>
                    </row>
                </Form>

                <Table border :columns="columns" :data="data"></Table>
                <Page :total="100" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>

                <!--详情-->
                <Modal
                        v-model="showSeeModel"
                        title="详情"
                        cancel-text
                        ok-text="关闭"
                        width="500">
                    <Form :model="details" label-position="right" :label-width="100"  >
                        <Form-item label="消息类别">
                            <Input v-model="details.type" readonly></Input>
                        </Form-item>
                        <Form-item label="创建时间">
                            <Input v-model="details.time" readonly></Input>
                        </Form-item>
                        <Form-item label="消息状态">
                            <Input v-model="details.situation" readonly></Input>
                        </Form-item>
                        <Form-item label="消息内容">
                            <Input v-model="details.content" readonly></Input>
                        </Form-item>
                    </Form>
                </Modal>

            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        data() {
            return {
                list: {},
                type:'',
                situation:'',
                showSeeModel:false,
                details: {
                    type:'',
                    time:'',
                    situation:'',
                    content:'',
                },
                num:1,
                size:10,
                total:40,
                typeList: [
                    {
                        value: 'order',
                        label: '配送提醒'
                    },
                    {
                        value: 'inspect',
                        label: '巡检提醒'
                    },
                    {
                        value: 'notice',
                        label: '公告提醒'
                    }
                ],
                situationList: [
                    {
                        value:'read',
                        label:'已读',
                    },
                    {
                        value:'unread',
                        label:'未读',
                    }
                ],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '消息类型',
                        key: 'type',
                        render: (h, params) => {
                            return h('div', [
                                h('strong', params.row.type)
                            ]);
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'time'
                    },
                    {
                        title: '消息状态',
                        key: 'situation'
                    },
                    {
                        title: '消息内容',
                        key: 'content'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'information-circled',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showSee();
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                data: [
                    {
                        type: '用户信息',
                        time: '2017-10-19 13:53:40',
                        situation: '未读',
                        content: '登录',
                    }
                ]
            }
        },
        methods: {
            showSee() {
                this.showSeeModel = true;
            },
            changePage(num) {
                this.num = num;
                this.getList(this.size,num)
            },
            changeSize(size) {
                this.size = size;
                this.getList(size,this.num)
            },
            getList(size,num) {
                let params = {
                    pageSite:size,
                    pageStart:num,
                };
                api.fetchPost(api.path.transferPage,params).then((data) => {
                    if(data.code = 10000) {
                        this.$emit('hideLoading');
                        this.loading = false;
                        this.total = data.data.total;
                        this.data1 = data.data.data;
                    }else{
                        this.$Message.error(data.msg)
                    }
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
        }
    }
</script>
